<template>
  <div class="table-ctrl-body">
    <!--按钮组-->
    <div class="Btns-ctrl-body">

      <!--高级搜索-->
      <SearchPublic
        :searchObj="searchObj"
        @searchParams="searchParamsFn"
      ></SearchPublic>

     <!-- <div class="search-ctrl f-l" >
        <form style="height: 100%;">
          <input placeholder="输入警员姓名搜索" class="search-text" @keyup="defaultLoad($event)" v-model="tableSearchText">
          <button class="search-btn btn btn-info" type="button" @click="tableSearchBtn">搜索</button>
        </form>
      </div>-->

      <div class="btns f-r">
        <button type="button" class="btn btn-info" @click="addPoliceFn">新增</button>
        <button type="button" class="btn btn-warning" @click="revampPoliceFn">修改</button>
        <button type="button" class="btn btn-danger" @click="deletePoliceFn">删除</button>
        <button type="button" class="btn btn-success" @click="queryPoliceFn">详情</button>
        <button type="button" class="btn btn-info" @click="pushModal">导入</button>
       <!-- <button type="button" class="btn btn-info" @click="getModal">模板导出</button>-->
        <!--<button type="button" class="btn btn-success">刷新</button>-->
      </div>
    </div>
    <!--按钮组闭合-->
    <!--表格组-->
    <div class="table-ctrl">
      <!--表格头-->
      <div class="table-header">
        <table class="table-default">
          <thead>
          <tr>
            <th
              v-for="(item,index) in treeTable.tHeader"
              :key="index">
              {{item.value}}
            </th>
          </tr>
          </thead>
        </table>
      </div>
      <!-- {{treeTableRow}} -->
      <!-- {{treeTable.tHeader}} -->
      <!--表格中部-->
      <div class="table-overflowX">
        <table class="table-default">

          <tbody>
          <tr
            v-for="(trs,index) in treeTableRow.data"
            @click="userSelect(trs,index)"
            :class="{active: isActive===index}"
            :key="index">
            <td v-for="(tds,index) in treeTable.tHeader" :key="index" :title="trs[tds.key]">
              {{ [trs,tds.key] | tableName }}
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <!--表格翻页-->
      <Pages
        v-show="treeTableRow.elementsSum !== 0"
        v-if="treeTableRow"
        :showItem="10"
        :pageSize="20"
        :allDataSum="treeTableRow.elementsSum"
        :allpage="(Math.ceil(treeTableRow.elementsSum/20))"
        @current-change="tablePageData"
      ></Pages>

    </div>

    <!--新增警员-->
    <AddPoliceModal
      @closeModalAddPolice="closeModalAddPoliceFn"
      :addModalObj="addModalObj"
      @newPoliceSucceed="newPoliceSucceedFn"
    ></AddPoliceModal>

    <!--修改警员-->
    <revampPoliceModal
      @closeModalRevampPolice="closeModalRevampPoliceFn"
      :revampDetailsModal="revampDetailsModal"
      @newPoliceSucceed="newPoliceSucceedFn"
      :policeId="activeUserId"
    ></revampPoliceModal>

    <!--查询警员信息-->
    <policeDetails
      :detailsPoliceObj="detailsPoliceObj"
      :policeId="activeUserId"
      @policeDetailsClose="policeDetailsCloseFn"
    ></policeDetails>

    <!--警员导入-->
   <!-- <upPoliceModal
      :upPoliceModalObj="upPoliceModalObj"
      @upModalClose="upModalCloseFn"
    ></upPoliceModal>-->
    <BulkImport
      :bulkImportObj="bulkImportObj"
      @upModalClose="upModalCloseFn"
    ></BulkImport>

  </div>
</template>

<script>
  import Pages from "../../sudoku/atom/pages.vue"
  import AddPoliceModal from "./AddPoliceModal"
  import revampPoliceModal from "./revampPoliceModal"
  import policeDetails from "./policeDetails"
  import upPoliceModal from "./upPoliceModal"
  import BulkImport from "../../publicTemplate/bulkImport/BulkImport"
  import SearchPublic from "../../publicTemplate/search/SearchPublic"

  export default {

    name: "policeTable",
    props:["treeTableRow","station","searchObj"],
    data() {
      return {
        tableSearchText:"",
        dialogContent:{},
        isActive:-1,
        activeUserId:null,
        treeTable:{
          tHeader:[
            {"key":"policeName","value":"警员姓名"},
            {"key":"policeCode","value":"警员编号"},
            {"key":"policeStationInfo|stationName","value":"所属单位"},
            {"key":"telephone","value":"联系电话"},
            {"key":"gender","value":"性别"},
            {"key":"sort","value":"排序"},
          ]
        },
        userDetailsModal:{
          isShow:false
        },
        revampDetailsModal:{
          isShow:false
        },
        addModalObj:{
          isShow:false
        },
        detailsPoliceObj:{
          isShow:false
        },
        upPoliceModalObj:{
          isShow:false
        },
        bulkImportObj:{
          title:"导入警员",
          isShow:false,
          TemplateUrl:"/bs/batch/getTemplate/police",
          upUrl:"/bs/batch/policeInfo",
          urlType:"admin"
        },
        PoliceHasNoUser:[]
      }
    },
    watch:{
      treeTableRow:{
        handler(v1){
          ////console.log(v1);
          this.isActive = -1;
          this.activeUserId = null;
        },
        deep:true
      }
    },
    components:{
      Pages,
      AddPoliceModal,
      revampPoliceModal,
      policeDetails,
      upPoliceModal,
      BulkImport,
      SearchPublic
    },
    filters:{
      tableName(value){ //设置表格数据信息
        let obj = value[0];
        let keyStr = value[1];
        let returnVal = "" ;
        if( keyStr.indexOf("|") === -1 ){
          if( obj[keyStr] === 0 && keyStr === "status" ){
            returnVal = "禁用"
          }else if( obj[keyStr] === 1 && keyStr === "status" ){
            returnVal = "启用"
          }else{
            returnVal = obj[keyStr];
          }
        }else {
          const keyArr = keyStr.split("|");
          returnVal = obj[keyArr[0]][keyArr[1]]
        }

        return returnVal;
      }
    },
    methods:{
      //修改用户弹窗关闭
      revampCloseFn(){
        this.revampUser.isShow = false;
      },
      //新增弹窗关闭
      closeModalFn(){
        this.addModalObj.isShow=false;
      },
      //表格分页
      tablePageData(page){
        this.clearTableSelect();
        this.$emit("pageChange",page);
      },
      //初始化表格选择条件
      clearTableSelect(){
        this.isActive = -1;
        this.activeUserId = null;
      },
      //表格搜索
      tableSearchBtn(){
        this.$emit("tableSearch",this.tableSearchText);
        //this.tableSearchText = "";
      },
      //选择警员
      userSelect(obj,index){
        this.isActive = index;
        this.activeUserId = obj.policeId;
        //console.log(obj);
      },
      //导入用户模板
      pushModal(){
        this.bulkImportObj.isShow = true;
      },
      upModalCloseFn(){
        this.bulkImportObj.isShow = false;
      },
      //删除用户
      /*deleteUser(){

        if(this.activeUserId === null || this.activeUserId  === "null" || this.activeUserId  === ""){ //未选择用户
          this.dialogContent = {
            isShow :true,
            text:"请选择删除用户！",
            title:"温馨提示",
            Btns:[
              {"btnName":"确定","className":"btn-info","function":["close"]}
            ]
          };
        }else{
          this.dialogContent = {
            isShow :true,
            text:"确定删除该用户？",
            title:"温馨提示",
            Btns:[
              {"btnName":"取消","className":"btn-default","function":["close"]},
              {"btnName":"确定","className":"btn-info","function":["close",'del']}
            ]
          };
        }

      },*/
      //导出模板
      getModal(){
        window.location.href = this.HOST + "/bs/batch/getTemplate/police";
      },
      //新增警员
      addPoliceFn(){
        this.addModalObj.isShow = true;
        //缓存赋给新增组件
        this.sessionStorage = JSON.parse(sessionStorage.getItem("stationCommunication"));
        //console.log(this.sessionStorage);
      },
      //修改警员
      revampPoliceFn(){
        //console.log(this.activeUserId);
        if( this.activeUserId ){
          this.revampDetailsModal.isShow = true;
        }else {
          this.s_alert("请选择警员！");
          // alert("请选择警员！");
        }

      },
      //默认加载
      defaultLoad(ev){
        if( ev.keyCode === 8 ){
          if( this.tableSearchText === "" ){
            this.tableSearchBtn();
          }
        }
      },
      //删除警员
      deletePoliceFn(){
        if( this.activeUserId ){
          let msg=confirm("是否确定删除该警员？");
          if(msg){
            this.$axios['delete'](this.HOST+"/police/",{
              params:{
                policeId:this.activeUserId
              }
            })
              .then((data)=>{
                if(data.data.success === true){
                  this.s_alert("删除成功");
                  // alert("删除成功");
                  this.s_logwrite("基础信息管理-警员管理","删除警员");
                  this.$emit("policeDeleteCallBack",this.isActive);//删除刷新
                  this.activeUserId = null; //清除选择的警员id

                  this.isActive = -1; //清除选择的该项
                }
                //console.log(data);
              })
              .catch((err)=>{
                //console.log(err);
              })
          }
        }else {
          this.s_alert("请选择要删除的警员！");
          // alert("请选择要删除的警员！");
        }
      },
      //新增窗口关闭
      closeModalAddPoliceFn(){
        this.addModalObj.isShow = false;
      },
      //修改窗口关闭
      closeModalRevampPoliceFn(){
        this.revampDetailsModal.isShow = false;
      },
      //查询警员详细信息
      queryPoliceFn(){
        if( this.activeUserId ){
          this.detailsPoliceObj.isShow = true;
        }else{
          this.s_alert("请选择需要查询的警员！");
          // alert("请选择需要查询的警员！");
        }
      },
      //关闭查询
      policeDetailsCloseFn(){
        this.detailsPoliceObj.isShow = false;
      },

      //刷新表格
      newPoliceSucceedFn(){
        this.closeModalFn();
        this.$emit("newPoliceSucceedFnOrigin");//通知数据源头刷新页面
      },

      //搜索
      searchParamsFn(searchParams){
        this.$emit("searchParamsParent")
      },
    }

  }
</script>

<style scoped>
  .fadeInDown,
  .fadeOutUp {
    animation-duration: .500s;
  }
</style>
